<template>
  <div v-if="data !== null && data !== undefined">
    <div v-for="(item, key) in data" v-bind:key="key">
      <template v-if="helpertitle[key] !== undefined && showfun(key) === true">
        <template v-if="helpertype[key] === 'selectoptionlist'">
          <optionlist :contdata.sync="data" :defaultValue="data.defaultValue" />
        </template>
        <template v-else-if="helpertype[key] === 'panelist'">
          <panelist
            :element="data"
            :title="helpertitle[key]"
            :content="helpercontent[key]"
            :datalist="data.panelist"
          />
        </template>
        <template v-else-if="helpertype[key] === 'ruleslist'">
          <ruleslist
            :title="helpertitle[key]"
            :content="helpercontent[key]"
            :datalist="data.options.ruleslist"
          />
        </template>
        <template v-else-if="helpertype[key] === 'dynamiclist'">
          <dynamiclist
            :title="helpertitle[key]"
            :content="helpercontent[key]"
            :datalist="data.dynamiclist"
          />
        </template>
        <template v-else-if="helpertype[key] === 'layoutitemlist'">
          <Layoutitemlist
            :title="helpertitle[key]"
            :content="helpercontent[key]"
            :datalist="data.layoutitemlist"
          />
        </template>
        <template
          v-else-if="
            helpertype[key] === 'columnslist' && data.type === 'wmpDetail'
          "
        >
          <columnslist
            :title="helpertitle[key]"
            :content="helpercontent[key]"
            :datalist="data.columns"
          />
        </template>
        <template v-else-if="helpertype[key] === 'controlType'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <el-select
              v-model="data[key]"
              style="width: 100%;"
              size="mini"
              @change="controlTypeChange"
            >
              <el-option
                v-for="optionitem in controlTypeList"
                v-bind:key="optionitem.type"
                :value="optionitem.type"
                :label="optionitem.name"
              ></el-option>
            </el-select>
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'columnslist'">
          <gridcolumns
            :title="helpertitle[key]"
            :content="helpercontent[key]"
            :datalist="data.columns"
            :widgetdata="data"
          />
        </template>
        <template v-else-if="helpertype[key] === 'select'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <el-select v-model="data[key]" style="width: 100%;" size="mini">
              <el-option
                v-for="optionitem in helperdatalist[key]"
                v-bind:key="optionitem.value"
                :value="optionitem.value"
                :label="optionitem.label"
              ></el-option>
            </el-select>
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'icon'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <iconedit :value.sync="data[key]"></iconedit>
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'number'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <el-input
              v-model.number="data[key]"
              type="number"
              size="small"
              :placeholder="helpercontent[key]"
            />
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'switch'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <a-switch size="small" v-model="data[key]" />
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'colorpicker'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <el-color-picker v-model="data.options[key]"></el-color-picker>
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'selectSpan'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <selectslider :spannum.sync="data[key]" />
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'selectApi'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <selectapi
              :apicode="data[key]"
              methodType="1"
              :controlInfo="data"
              :controlId="data.options.controlId"
              :controlType="data.type"
            />
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'buttonlist'">
          <buttonlist
            :title="helpertitle[key]"
            :content="helpercontent[key]"
            :datalist="data.buttons"
          />
        </template>
        <template v-else>
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <el-input type="text" size="small" v-model="data[key]" />
          </propertyitem>
        </template>
      </template>
      <div v-if="key === 'options'">
        <div v-for="(item, itemkey) in data.options" v-bind:key="itemkey">
          <template
            v-if="
              helpertitle[itemkey] !== undefined &&
                showfun(itemkey, key) === true
            "
          >
            <template v-if="helpertype[itemkey] === 'selectoptionlist'">
              <optionlist
                :contdata="data"
                :defaultValue="data.options.defaultValue"
              />
            </template>
            <template v-else-if="helpertype[itemkey] === 'panelist'">
              <panelist
                :element="data"
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
                :datalist="data.options.panelist"
              />
            </template>
            <template v-else-if="helpertype[itemkey] === 'ruleslist'">
              <ruleslist
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
                :datalist="data.options.ruleslist"
              />
            </template>
            <template v-else-if="helpertype[itemkey] === 'dynamiclist'">
              <dynamiclist
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
                :datalist="data.options.dynamiclist"
              />
            </template>
            <template v-else-if="helpertype[itemkey] === 'layoutitemlist'">
              <Layoutitemlist
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
                :datalist="data.options.layoutitemlist"
              />
            </template>
            <template
              v-else-if="
                helpertype[itemkey] === 'columnslist' &&
                  data.type === 'wmpDetail'
              "
            >
              <columnslist
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
                :datalist="data.options.columns"
              />
            </template>
            <template v-else-if="helpertype[itemkey] === 'columnslist'">
              <gridcolumns
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
                :datalist="data.options.columns"
                :widgetdata="data"
                ref="gridcolumnmodel"
              />
            </template>
            <template v-else-if="helpertype[itemkey] === 'selectSpan'">
              <propertyitem
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
              >
                <selectslider :spannum.sync="data.options[itemkey]" />
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'select'">
              <propertyitem
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
              >
                <el-select
                  v-model="data.options[itemkey]"
                  style="width: 100%;"
                  size="mini"
                >
                  <el-option
                    v-for="optionitem in helperdatalist[itemkey]"
                    v-bind:key="optionitem.value"
                    :value="optionitem.value"
                    :label="optionitem.label"
                  ></el-option>
                </el-select>
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'icon'">
              <propertyitem
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
              >
                <iconedit :value.sync="data.options[itemkey]"></iconedit>
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'number'">
              <propertyitem
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
              >
                <el-input
                  v-model.number="data.options[itemkey]"
                  type="number"
                  size="small"
                  :placeholder="helpercontent[itemkey]"
                />
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'switch'">
              <propertyitem
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
              >
                <a-switch size="small" v-model="data.options[itemkey]" />
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'colorpicker'">
              <propertyitem
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
              >
                <el-color-picker
                  v-model="data.options[itemkey]"
                ></el-color-picker>
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'selectApi'">
              <propertyitem
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
              >
                <selectapi
                  :apicode.sync="data.options[itemkey]"
                  methodType="1"
                  :sourceApiId="data.options.sourceApiId"
                  :controlInfo="data"
                  :controlId="data.options.controlId"
                  :controlType="data.type"
                  @confirmSelect="confirmSelect"
                />
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'buttonlist'">
              <buttonlist
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
                :datalist="data.options.buttons"
              />
            </template>
            <template v-else>
              <propertyitem
                :title="helpertitle[itemkey]"
                :content="helpercontent[itemkey]"
              >
                <propertyitemvalue
                  :helpertype="helpertype[itemkey]"
                  :contentval.sync="data.options[itemkey]"
                ></propertyitemvalue>
              </propertyitem>
            </template>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { helper } from '@/components/formdesign/propertyhelpConfig.js'
import propertyitem from '@/components/formdesign/propertyitem.vue'
import buttonlist from '@/components/formdesign/buttonlist.vue'
import optionlist from '@/components/formdesign/optionlist.vue'
import columnslist from '@/components/formdesign/columnslist.vue'
import Layoutitemlist from '@/components/formdesign/Layoutitemlist.vue'
import gridcolumns from '@/components/formdesign/gridcolumnslist.vue'
import panelist from '@/components/formdesign/panelist.vue'
import dynamiclist from '@/components/formdesign/dynamiclist.vue'
import selectapi from '@/components/formdesign/selectapi.vue'
import iconedit from '@/components/formdesign/iconedit.vue'
import selectslider from '@/components/formdesign/selectslider.vue'
import ruleslist from '@/components/formdesign/ruleslist.vue'
import propertyitemvalue from '@/components/formdesign/propertyitemvalue.vue'
import {
  basicComponents,
  platformComponents
} from '@/components/formdesign/controlconfig.js'
export default {
  props: ['data', 'select'],
  data() {
    return {
      helperdata: helper,
      helpertitle: null,
      helpercontent: null,
      helpertype: null,
      helperdatalist: null,
      helpershowfun: null,
      controlTypeList: [],
      controlType: [],
      fromInfo: this.changeFromInfo()
    }
  },
  components: {
    propertyitem,
    buttonlist,
    optionlist,
    columnslist,
    Layoutitemlist,
    gridcolumns,
    panelist,
    dynamiclist,
    selectapi,
    iconedit,
    selectslider,
    ruleslist,
    propertyitemvalue
  },
  methods: {
    buttonEdit(data) {
      this.data = data
      this.selectWidget = data
      this.$emit('update:select', data)
    },
    showfun(itemkey, key) {
      if (this.helpershowfun[itemkey] === undefined) {
        return true
      }
      return this.helpershowfun[itemkey](this.fromInfo, this.data, key)
    },
    controlTypeChange(val) {
      const controlObject = this.controlType.filter(item => {
        return item.type.indexOf(val.trim()) >= 0
      })
      const filed = this.data.options.filed
      const newcontrolObject = JSON.parse(JSON.stringify(controlObject[0]))
      this.data = Object.assign(this.data, newcontrolObject)
      this.data.options.filed = filed
      this.selectWidget = this.data
      this.$emit('update:select', this.data)
    },
    confirmSelect() {
      this.$refs.gridcolumnmodel[0].loadfiled()
    }
  },
  created() {
    this.helpertitle = {}
    this.helpercontent = {}
    this.helpertype = {}
    this.helperdatalist = {}
    this.helpershowfun = {}
    for (const key in this.helperdata) {
      this.helpertitle[key] = this.helperdata[key].title
      this.helpercontent[key] = this.helperdata[key].content
      if (this.helperdata[key].type !== undefined) {
        this.helpertype[key] = this.helperdata[key].type
      }
      if (this.helperdata[key].data !== undefined) {
        this.helperdatalist[key] = this.helperdata[key].data
      }
      if (this.helperdata[key].showfun !== undefined) {
        this.helpershowfun[key] = this.helperdata[key].showfun
      }
    }
    this.controlTypeList = []
    this.controlType = []
    for (let idex = 0; idex < basicComponents.length; idex++) {
      if (basicComponents[idex].dragType === 'control') {
        this.controlTypeList.push({
          name: basicComponents[idex].name,
          index: idex,
          type: basicComponents[idex].type
        })
        this.controlType.push(basicComponents[idex])
      }
    }
    for (let idex = 0; idex < platformComponents.length; idex++) {
      if (platformComponents[idex].dragType === 'control') {
        this.controlTypeList.push({
          name: platformComponents[idex].name,
          index: idex,
          type: platformComponents[idex].type
        })
        this.controlType.push(platformComponents[idex])
      }
    }
  },
  computed: {
    SetChangeFromInfo() {
      return this.changeFromInfo()
    }
  },
  watch: {
    SetChangeFromInfo(val) {
      this.fromInfo = val
    }
  },
  inject: ['changeFromInfo']
}
</script>
